<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <div style="width: 100vw; height: 100vh" id="home">
        <dv-border-box-8 :color="['#50cfff', 'violet']">
          <dv-decoration-5 id="title" :color="['#5f9aff', '#51CBFF']">
          </dv-decoration-5>
        </dv-border-box-8>
        <p id="screen-title">迢迢二手车后台管理系统</p>
      </div>
      <el-button
        round
        type="primary"
        id="jump"
        @click="$router.push('/home/car-management')"
        >车辆列表</el-button
      >
      <dv-flyline-chart-enhanced id="bg" :config="config" />
      <dv-active-ring-chart
        id="circle"
        :config="circle"
        style="width: 300px; height: 300px"
      ></dv-active-ring-chart>
      <dv-capsule-chart
        id="capsule"
        :config="capsule"
        style="width: 700px; height: 400px"
      ></dv-capsule-chart>
      <div class="infinite-list-wrapper" style="overflow: auto">
        <ul
          id="ul"
          class="list"
          v-infinite-scroll="load"
          infinite-scroll-disabled="disabled"
        >
          <div id="list-header">
            <span>序号</span>
            <el-divider direction="vertical"></el-divider>
            <span>收购日期</span>
            <el-divider direction="vertical"></el-divider>
            <span>品牌</span>
            <el-divider direction="vertical"></el-divider>
            <span>车系</span>
            <el-divider direction="vertical"></el-divider>
            <span>收购价格</span>
          </div>
          <hr />
          <li
            id="li"
            v-for="item in form.result"
            :key="item.lid"
            class="list-item"
          >
            <span>{{ item.lid }}</span>
            <span>{{ item.date }}</span>
            <span>{{ item.brand }}</span>
            <span>{{ item.car }}</span>
            <span>￥:{{ item.price }}元</span>
          </li>
        </ul>
        <p v-if="loading">加载中...</p>
        <p v-if="noMore">没有更多了</p>
      </div>
      <span id="source">车辆来源地分布</span>
      <span id="proportion">车辆品牌占比</span>
    </dv-full-screen-container>
  </div>
</template>
<script>
import httpApi from "@/http";
export default {
  data() {
    return {
      form: {
        pageNum: 0,
        pageCount: 10,
        total: 0,
        result: [],
      },
      capsule: {
        data: [],
        unit: "辆",
        showValue: true,
        colors: ["#5f9aff", "#51CBFF", "violet", "aqua"],
      },
      circle: {
        activeTimeGap: 2000,
        radius: "40%",
        activeRadius: "45%",
        digitalFlopStyle: {
          fontSize: 20,
        },
        data: [],
      },
      loading: false,
      config: {
        points: [
          {
            name: "武汉",
            coordinate: [0.6, 0.63],
            halo: {
              show: true,
            },
          },
          {
            name: "新乡",
            coordinate: [0.5, 0.62],
          },
          {
            name: "银川",
            coordinate: [0.51, 0.46],
          },
          {
            name: "临汾",
            coordinate: [0.58, 0.51],
          },
          {
            name: "昆明",
            coordinate: [0.47, 0.74],
          },
          {
            name: "西宁",
            coordinate: [0.43, 0.52],
          },
          {
            name: "酒泉",
            coordinate: [0.4, 0.4],
          },
          {
            name: "合肥",
            coordinate: [0.65, 0.6],
            halo: {
              show: true,
              color: "#8378ea",
            },
          },
          {
            name: "西安",
            coordinate: [0.54, 0.54],
          },
          {
            name: "昌都",
            coordinate: [0.37, 0.62],
            halo: {
              show: true,
              color: "#37a2da",
            },
          },
          {
            name: "广州",
            coordinate: [0.6, 0.75],
          },
          {
            name: "贵阳",
            coordinate: [0.52, 0.7],
          },
          {
            name: "哈密",
            coordinate: [0.32, 0.34],
          },
          {
            name: "三门峡",
            coordinate: [0.2, 0.48],
          },
          {
            name: "白山",
            coordinate: [0.76, 0.34],
          },
          {
            name: "鹤岗",
            coordinate: [0.77, 0.2],
          },
          {
            name: "白城",
            coordinate: [0.72, 0.27],
          },
          {
            name: "锡林郭勒盟",
            coordinate: [0.65, 0.3],
          },
        ],
        lines: [
          {
            source: "新乡",
            target: "武汉",
          },
          {
            source: "银川",
            target: "武汉",
          },
          {
            source: "临汾",
            target: "武汉",
          },
          {
            source: "合肥",
            target: "武汉",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "昌都",
            target: "武汉",
            color: "#fb7293",
            width: 2,
          },
          {
            source: "哈密",
            target: "武汉",
          },
          {
            source: "三门峡",
            target: "武汉",
          },
          {
            source: "白山",
            target: "武汉",
          },
          {
            source: "鹤岗",
            target: "武汉",
          },
          {
            source: "白城",
            target: "武汉",
          },
          {
            source: "锡林郭勒盟",
            target: "武汉",
          },
          {
            source: "昆明",
            target: "武汉",
            color: "#37a2da",
          },
          {
            source: "西宁",
            target: "武汉",
            color: "#37a2da",
          },
          {
            source: "酒泉",
            target: "武汉",
            color: "#37a2da",
          },
          {
            source: "贵阳",
            target: "武汉",
            color: "#8378ea",
          },
          {
            source: "广州",
            target: "武汉",
            color: "#8378ea",
          },
          {
            source: "西安",
            target: "武汉",
            color: "#8378ea",
          },
        ],
        text: {
          show: true,
        },
        k: 0.5,
        bgImgSrc: require("/dist/img/map2.png"),
      },
    };
  },
  mounted() {
    this.carList();
  },
  created() {
    this.car();
    this.carProvince();
  },
  methods: {
    load() {
      console.log(1);
      this.loading = true;
      setTimeout(() => {
        this.loading = false;
        this.form.pageNum += 1;
        this.carList();
        if (this.form.pageNum >= 5) {
          return;
        }
        console.log(this.form);
      }, 1000);
    },
    carList() {
      let params = {
        pageNum: this.form.pageNum,
        pageCount: this.form.pageCount,
      };
      httpApi.carmanagementApi.carListIndex(params).then((res) => {
        console.log(res);
        this.form.result.push(...res.data.data);
        this.form.pageNum = res.data.pageNum;
        this.form.pageCount = res.data.pageCount;
        this.form.total = res.data.total;
      });
    },
    async car() {
      let byd = {
        brand: "比亚迪",
      };
      await httpApi.carmanagementApi.carQueryByBrand(byd).then((res) => {
        this.circle.data[0] = res.data.result;
      });
      let bt = {
        brand: "奔腾",
      };
      await httpApi.carmanagementApi.carQueryByBrand(bt).then((res) => {
        console.log(res);
        this.circle.data[1] = res.data.result;
      });
      let at = {
        brand: "奥拓",
      };
      await httpApi.carmanagementApi.carQueryByBrand(at).then((res) => {
        console.log(res);
        this.circle.data[2] = res.data.result;
      });
      this.circle = { ...this.circle };
    },
    async carProvince() {
      let hb = {
        provinceid: "湖北省",
      };
      await httpApi.carmanagementApi.carQueryByProvince(hb).then((res) => {
        this.capsule.data[0] = res.data.result;
      });
      let gd = {
        provinceid: "广东省",
      };
      await httpApi.carmanagementApi.carQueryByProvince(gd).then((res) => {
        this.capsule.data[1] = res.data.result;
      });
      let hn = {
        provinceid: "湖南省",
      };
      await httpApi.carmanagementApi.carQueryByProvince(hn).then((res) => {
        this.capsule.data[2] = res.data.result;
      });
      let js = {
        provinceid: "江苏省",
      };
      await httpApi.carmanagementApi.carQueryByProvince(js).then((res) => {
        this.capsule.data[3] = res.data.result;
      });
      let zj = {
        provinceid: "浙江省",
      };
      await httpApi.carmanagementApi.carQueryByProvince(zj).then((res) => {
        this.capsule.data[4] = res.data.result;
      });
      let sc = {
        provinceid: "四川省",
      };
      await httpApi.carmanagementApi.carQueryByProvince(sc).then((res) => {
        this.capsule.data[5] = res.data.result;
      });
      let gx = {
        provinceid: "广西自治区",
      };
      await httpApi.carmanagementApi.carQueryByProvince(gx).then((res) => {
        this.capsule.data[6] = res.data.result;
      });
      this.capsule = { ...this.capsule };
    },
  },
  computed: {
    noMore() {
      return (
        this.form.pageNum >= Math.ceil(this.form.total / this.form.pageCount)
      );
    },
    disabled() {
      return this.loading || this.noMore;
    },
  },
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
#home {
  position: absolute;
  background-image: url("../../public/img/1.jpg");
}
#title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 500px;
  height: 80px;
  top: 17px;
}
#screen-title {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
  color: #50cfff;
  top: 10px;
  font-size: 24px;
}
#jump {
  position: absolute;
  right: 50%;
  top: 100px;
  transform: translateX(50%);
  background-color: #50cfff;
}
#container {
  position: absolute;
  z-index: 2;
}
#map {
  width: 1200px;
  height: 800px;
  position: absolute;
  z-index: 1;
}
.bg {
  width: 100vw;
  height: 100vh;
}
#bg {
  position: absolute;
  z-index: 1;
  width: 1000px;
  height: 700px;
  top: 140px;
  right: 100px;
}
#ul {
  z-index: 1;
  width: 700px;
  bottom: 100px;
  left: 20px;
  color: #fff;
  list-style: none;
}
#list-header {
  display: flex;
  justify-content: space-between;
  position: fixed;
  width: 700px;
  bottom: 420px;
  span {
    display: block;
    width: 100%;
    text-align: center;
  }
}
#li {
  display: flex;
  justify-content: space-between;
  margin: 10px 0;
  span {
    display: block;
    width: 100%;
    text-align: center;
  }
}
.infinite-list-wrapper {
  position: absolute;
  width: 720px;
  height: 300px;
  z-index: 1;
  bottom: 120px;
  left: 5px;
  p {
    text-align: center;
    color: #50cfff;
  }
}
#circle {
  position: absolute;
  top: 370px;
  left: 220px;
  z-index: 1;
}
#capsule {
  position: absolute;
  top: 30px;
  left: 20px;
  z-index: 1;
  .label-column {
    font-size: 16px;
  }
  .unit-text {
    font-size: 16px;
  }
  .unit-label {
    font-size: 16px;
  }
  .capsule-item-value {
    font-size: 16px;
  }
}
#source {
  position: absolute;
  top: 5px;
  left: 300px;
  color: #50cfff;
  font-weight: bold;
  font-size: 20px;
}
#proportion {
  position: absolute;
  color: #50cfff;
  font-weight: bold;
  font-size: 20px;
  left: 100px;
  top: 510px;
}
</style>